<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

  <p style="display: none;">玩命加载中...</p>

  <progress max="0" value="0"></progress>

  <script>
    let xhr = new XMLHttpRequest();

    xhr.onload = function () {
      // 请求成功后触发
      let res = xhr.responseText;
      console.log(res.length);
    }

    xhr.onerror = function () {
      // 请求失败后触发
      console.log('请求失败');
    }

    xhr.onloadstart = function () {
      // 请求开始时触发
      document.querySelector('p').style.display = 'block';
      console.log('请求开始了');
    }

    xhr.onloadend = function () {
      // 请求完成（成功、失败）后触发
      console.log('请求完成了');
      document.querySelector('p').style.display = 'none';
    }

    xhr.onprogress = function (e) {
      console.log(e); // e.loaded 表示已经接收到了多少数据  e.total 表示数据总量
      let pro = document.querySelector('progress');
      pro.max = e.total;
      pro.value = e.loaded;
      // 接收响应结果的时候，才会触发，如果接收的数据量特别，客户端要分块接收，每接收一部分数据，这个事件就触发一次
      console.log('正在接收中....');
    }

    // xhr.open('GET', 'http://www.liulongbin.top:3006/api/getbooks');
    xhr.open('GET', 'http://localhost:3000/api/test');
    xhr.send();
  </script>
</body>

</html>